<template>
  <div style="background: rgba(0,0,0,0.21);height: 104%">
    <div style="display: flex; flex-wrap: wrap; gap: 10px;margin: 10px;" class="coverImg">
      <img class="pet_cover_imgs"
           v-for="(item, index) in petInfo"
           :key="index"
           :src="item.coverImg"
           @click="changeIndex(index)"
      />
    </div>
    <div class="page">

      <h1 style="margin-left: 37%">宠物疫苗接种记录</h1>
      <div style="display: flex;flex-wrap: wrap;padding: 0 10% 0 15%;">
        <div class="petInformation_contain">
          <div style="font-weight: 400;font-size: small">宠物名称</div>
          <div class="petInformation">
            {{ petInfo[selected].petName }}
          </div>
        </div>
        <div class="petInformation_contain">
          <div style="font-weight: 400;font-size: small">宠物品种</div>
          <div class="petInformation">{{ petInfo[selected].specis }}</div>
        </div>
        <div class="petInformation_contain">
          <div style="font-weight: 400;font-size: small">宠物年龄</div>
          <div style="display: flex">
            <div class="petInformation">{{ petInfo[selected].age }}</div>
            <div class="petInformation2">岁</div>
          </div>
        </div>
        <div class="petInformation_contain">
          <div style="font-weight: 400;font-size: small">宠物性别</div>
          <div class="petInformation">{{ petInfo[selected].gender === 1 ? '母' : '公' }}</div>
        </div>
        <div class="petInformation_contain">
          <div style="font-weight: 400;font-size: small">宠物体重</div>
          <div style="display: flex">
            <div class="petInformation">{{ petInfo[selected].weight }}</div>
            <div class="petInformation2">Kg</div>
          </div>

        </div>
        <div class="petInformation_contain">
          <div style="font-weight: 400;font-size: small">宠物体型</div>
          <div class="petInformation">{{ petInfo[selected].size }}</div>
        </div>
      </div>
      <div class="Vaccination_line">
        <div style="flex: 1;align-items: center">疫苗名称</div>
        <div style="flex: 1">接种日期</div>
        <div style="flex: 1">下次接种日期</div>
        <div style="flex: 1">接种医生</div>
        <div style="flex: 1">接种医院</div>
      </div>
      <div>
        <el-select v-model="addVaccinationRecond.vaccinationId" placeholder="请选择疫苗" style="width: 300px">
          <el-option v-for="item in vaccinatinList" :key="item.id" :label="item.name"
                     :value="item.id"/>
        </el-select>
        <el-date-picker
            v-model="addVaccinationRecond.createTime"
            type="datetime"
            style="font-size: large"
            placeholder="选择接种时间"
        />
        <el-date-picker
            v-model="addVaccinationRecond.nextTime"
            type="datetime"
            style="font-size: large"
            placeholder="选择下次接种时间"
        />
        <input class="Vaccination_input" v-model="addVaccinationRecond.docName">
        <input class="Vaccination_input" v-model="addVaccinationRecond.hospital">
        <img src="../assets/img/check.png" class="addVaccinationButton" @click="addRecord"/>
      </div>
      <div style="overflow-y: auto;max-height: 500px;">
        <div class="Vaccination_line2" v-for="item in selectArray" :key="item.id" v-if="selectArray.length > 0">
          <div style="flex: 1;align-items: center">{{ item.vaccinationName }}</div>
          <div style="flex: 1">{{ item.createTime }}</div>
          <div style="flex: 1">{{ item.nextTime }}</div>
          <div style="flex: 1">{{ item.docName }}</div>
          <div style="flex: 1">{{ item.hospital }}</div>
          <el-button type="text" style="color: red" @click="deleteRecord(item)">删除</el-button>
        </div>
        <div class="Vaccination_line2" v-else>
          暂无数据
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  addVaccinationRecord,
  getAllVaccination,
  getPetListAPI,
  getVaccinationRecord,
  updateVaccinationRecord
} from "@/api/petApi";
import {parseTime2} from "@/utils/timeUtil";
import {ElNotification} from "element-plus";

export default {
  name: "Vaccination",
  data() {
    return {
      vaccinationReconds: null,
      vaccinatinList: null,
      selected: 0,
      petInfo: [
        {
          petId: 1,
          petName: "小白",
          specis: "狗",
          age: 3,
          weight: 15,
          gender: 1,
          dateOfBirth: 1621440000000,
          size: "中型",
          hairLength: "短毛",
          color: "白色",
          vaccinationReconds: 0,
          vaccinationRecond: '',
          dewormingRecords: 0,
          dewormingRecord: '',
          medicalHistory: "无",
          allergyHistory: "无",
          personalityTraits: "活泼粘人",
          dietaryHabits: "喜欢鸡肉和狗粮",
          activityPreferences: "喜欢跑步和玩球",
          sleepHabits: "喜欢睡觉",
          sportHabits: "习惯运动",
          coverImg: "http://localhost:8090/image/大狗 (2).png",
          mainImg: "http://localhost:8090/imag1312312313e/大狗 (2).png",
          imgs: "http://localhost:8090/image/大狗 (3).png;http://localhost:8090/image/大狗 (4).png;http://localhost:8090/image/大狗 (5).png"
        }
      ],
      addVaccinationRecond: {
        createTime: new Date()
      },
      selectArray: []
    }
  },
  mounted() {
    this.getPetInfo();
    this.selectVaccination()
    this.selectVaccinationRecord()
  },
  methods: {
    deleteRecord(item) {
      const data = {id: item.id, isDelete: 1, petId: item.petId}
      updateVaccinationRecord(data).then(res => {
        this.notification('删除成功', "success")
        getVaccinationRecord().then(res => {
          res.data.forEach(item => {
            item.createTime = parseTime2(item.createTime);
            item.nextTime = parseTime2(item.nextTime);
          });
          this.vaccinationReconds = res.data
          this.changeIndex(this.selected)
        })
      })
    },
    notification(title, type) {
      {
        ElNotification({
          title: title,
          type: type,
        })
      }
    },
    addRecord() {
      addVaccinationRecord(this.addVaccinationRecond).then(res => {
        this.notification('添加成功', "success")
        this.selectVaccinationRecord()
      }).catch(err => {
        this.notification('添加失败', "error")
      })
    },
    changeIndex(index) {
      this.selected = index;
      let petId = this.petInfo[index].petId;
      this.addVaccinationRecond.petId = petId;
      this.selectArray = this.vaccinationReconds.filter(item => item.petId === petId)
    },
    getPetInfo: function () {
      getPetListAPI().then(res => {
        this.petInfo = res.data.map(item => {
          const updatedItem = {...item}; //
          updatedItem.personalityTrait = updatedItem.personalityTraits.split(';');
          if (updatedItem.imgs && updatedItem.imgs.includes(';')) {
            updatedItem.phtos = updatedItem.imgs.split(';');
          }
          updatedItem.dateOfBirth = parseTime2(updatedItem.dateOfBirth);
          return updatedItem;
        });
      });
    },
    selectVaccination() {
      getAllVaccination().then(res => {
        this.vaccinatinList = res.data
      });
    },
    selectVaccinationRecord() {
      getVaccinationRecord().then(res => {
        res.data.forEach(item => {
          item.createTime = parseTime2(item.createTime);
          item.nextTime = parseTime2(item.nextTime);
        });
        this.vaccinationReconds = res.data
        this.changeIndex(0)
      })
    }
  }
}
</script>

<style scoped>
.pet_cover_imgs {
  object-fit: cover;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  border: #a7b1bb solid 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 90ms ease;
}

.pet_cover_imgs:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: height 300ms ease, transform 300ms ease; /* 过渡动画 */

}

.coverImg {
  overflow: hidden; /* 隐藏超出部分 */
}

.pet_cover_imgs:hover {
  transform: translateY(0);
}

.pet_cover_imgs:not(:hover) {
  transform: translateY(-25px);
}

.petInformation {
  margin-top: 10px;
  border: 2px solid #c9c9c9;
  padding: 9px;
  padding-left: 20px;
  border-radius: 7px;
  width: 70%;
}

.petInformation2 {
  padding-left: 5px;
  margin-top: 25px;
}

.petInformation_contain {
  flex: 1 1 45%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 160px;
  margin-top: 20px;
}

.page {
  padding: 20px;
  margin-left: 10%;
  margin-right: 10%;
  background: #f9f9f9;
  /*height: 100vh;*/
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', Tahoma, Verdana;
  color: #333;
  justify-content: center;
}

.Vaccination_input {
  font-size: 18px;
  font-weight: 100;
  border: 1px solid rgba(98, 97, 97, 0.3);
  color: #6c6c6c;
  height: 30px;
  margin-top: 0.1%;
  width: 20%;
  outline: none;
}

.Vaccination_line {
  margin-top: 30px;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 120px;
  background: rgba(164, 158, 158, 0.1);
}

.Vaccination_line2 {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 60px;
}

.Vaccination_line > div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center
}

.Vaccination_line2 > div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center
}

.addVaccinationButton {
  height: 30px;
  width: 30px;
  background: #a5e79b;
  border-radius: 9px;
  position: absolute;
  margin-bottom: -15px;
}

.addVaccinationButton:hover {
  cursor: pointer;
  scale: 1.1;
}

</style>